<template>
  <el-card class="user-info-card">
    <h2>用户信息</h2>
    <div class="user-avatar">
      <el-avatar size="large" :src="user.avatar"></el-avatar>
    </div>
    <div class="user-details">
      <p>用户名: <strong>{{ user.name }}</strong></p>
      <p>邮箱: <strong>{{ user.email }}</strong></p>
      <p>生日: <strong>{{ user.birthday }}</strong></p>
      <p>最喜欢的食物: <strong>{{ user.favoriteFood }}</strong></p>
    </div>
    <!-- 收藏的餐厅列表 -->
    <h3>收藏的餐厅列表</h3>
    <el-table :data="paginatedFavorites">
      <el-table-column prop="name" label="餐厅名称" width="180"></el-table-column>
      <el-table-column prop="image" label="照片" width="100">
        <template #default="{ row }">
          <img :src="row.image" class="restaurant-image" alt="餐厅图片" />
        </template>
      </el-table-column>
      <el-table-column prop="rating" label="评分" width="80"></el-table-column>
      <el-table-column prop="distance" label="距离" width="100"></el-table-column>
      <el-table-column prop="deliveryTime" label="配送时间" width="120"></el-table-column>
    </el-table>
    <!-- 历史操作记录 -->
    <h3>用户评价记录</h3>
    <el-table :data="paginatedHistory">
      <el-table-column prop="time" label="时间" width="180"></el-table-column>
      <el-table-column prop="restaurantName" label="餐厅名字" width="180"></el-table-column>
      <el-table-column prop="comment" label="具体评价" width="300"></el-table-column>
      <el-table-column prop="rating" label="评分" width="80"></el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import { ref, computed } from 'vue';
import { ElCard, ElTable, ElTableColumn, ElRate, ElPagination } from 'element-plus';

// 使用 ref 创建响应式引用
const user = ref({
  name: 'fxy',
  birthday: '2004-12-22',
  favoriteFood: 'water',
  email: '2024@163.com',
  avatar: 'src/assets/头像往事随风.png',
  favorites: ref([
    { id: 1, name: '椒麻鸡', image: 'src/assets/椒麻鸡.png', rating:'⭐️⭐️⭐️️', distance: '3km', deliveryTime: '30分钟' },
    { id: 2, name: '奥斯汀', image: 'src/assets/鸡腿堡.png', rating: '⭐️⭐️⭐️⭐️️', distance: '5km', deliveryTime: '45分钟' }
  ]),

  history: ref([
    { id: 1, time: '2024-11-13', restaurantName: '椒麻鸡', comment: '非常好吃！', rating: '⭐️️⭐️⭐️⭐️' },
    { id: 2, time: '2024-11-14', restaurantName: '东北黏糊麻辣烫', comment: '服务不错', rating: '⭐️⭐️⭐️' }
  ])
});

// 分页属性
const currentPage = ref(1); // 当前页码
const pageSize = ref(5); // 每页显示条目数

// 分页计算属性
const paginatedFavorites = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return user.value.favorites.slice(start, end);
});

const paginatedHistory = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return user.value.history.slice(start, end);
});

// 分页改变处理函数
const handlePageChange = (newPage) => {
  currentPage.value = newPage;
};
</script>

<style scoped>
.user-info-card {

  margin: 20px;
  padding: 20px;

  background: linear-gradient(120deg, #fff5e0, #fff5cc);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.user-avatar {
  margin-bottom: 20px;
}

.user-details p {
  color: #333;
  font-size: 16px;
}

.user-details strong {
  color: #409EFF;
}



.restaurant-image {
  width: 100px; /* 根据需要调整大小 */
  height: auto;
  border-radius: 8px;
  transition: transform 0.3s;
}

.restaurant-image:hover {
  transform: scale(1.1);
}

.history-list {
  margin-top: 20px;
  padding: 0;
  list-style-type: none;
}

.history-item {
  margin-bottom: 10px;
  color: #666;
}
</style>